<template>
  <div class="app-container customer-div">
    <div style="margin-top: 40px">
      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="120px">
        <el-form-item label="发货月份：">
          <el-date-picker
                  :clearable="false"
                  value-format="yyyy-MM"
                  v-model="listQuery.shipMonth"
                  type="month"
                  placeholder="选择月">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="客户名称：">
          <el-select
                  clearable
                  v-model="listQuery.customerId"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入关键词"
                  :remote-method="remoteMethod1"
                  :loading="customerLoading">
            <el-option
                    v-for="item in customerList"
                    :key="item.customerId"
                    :label="item.customerName"
                    :value="item.customerId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="回传状态：">
          <el-select
                  clearable
                  v-model="listQuery.isReceived"
                  filterable
                  reserve-keyword
                  placeholder="请输入关键词">
            <el-option :key="0" label="未回单" :value="0"></el-option>
            <el-option :key="1" label="已回单" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否打印：">
          <el-select
            clearable
            v-model="listQuery.isHasPrint">
            <el-option :key="0" label="否" :value="0"></el-option>
            <el-option :key="1" label="是" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
                  @click="handleSearchList()"
                  type="primary">
            查询
          </el-button>
          <el-button
                  @click="toPrintLetter('','more')"
                  :loading="btnloading"
                  type="primary">
            批量打印
          </el-button>
        </el-form-item>
      </el-form>
    </div>


    <!--数据列表-->
    <div class="table-container">
      <el-table
              :header-cell-style="{'text-align':'center'}"
              v-loading="listLoading"
              :data="tableData"
              border
              style="width: 100%; margin-top: 20px">
        <el-table-column
                label="月份"
                min-width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.shipMonth}}
          </template>
        </el-table-column>
        <el-table-column label="客户名称" min-width="200" align="center">
          <template slot-scope="scope">
              {{scope.row.customerName}}
          </template>
        </el-table-column>
        <!--<el-table-column-->
                <!--align="center"-->
                <!--label="合同公司"-->
                <!--min-width="100">-->
          <!--<template slot-scope="scope">-->
            <!--{{scope.row.fromCompany}}-->
          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column
                align="center"
                label="发货数量"
                min-width="100">
          <template slot-scope="scope">
            {{scope.row.shipNum}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="打印次数"
                min-width="100">
          <template slot-scope="scope">
            {{scope.row.printNum}}
          </template>
        </el-table-column>
        <el-table-column
                label="是否回传"
                min-width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.isReceived== 1 ? '是' : '否'}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="回传单"
                min-width="200">
          <template slot-scope="scope">
              <img :src="item" v-for="item in scope.row.receivedUrl" style="width:50px;height:50px;object-fit: contain;cursor: pointer" @click="fullImg(item)"/>
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="回传时间"
                min-width="150">
          <template slot-scope="scope">
              {{scope.row.uploadTime}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="回传人"
                min-width="100">
          <template slot-scope="scope">
            {{scope.row.uploadUser}}
          </template>
        </el-table-column>

        <el-table-column
                fixed="right"
                min-width="160"
                align="center"
                label="操作">
          <template slot-scope="scope">
            <el-button
                    type="text"
                    size="mini"
                    @click="toPrintLetter(scope.row,'one')">打印预览
            </el-button>
            <el-button
                    v-show="scope.row.receivedId != 0"
                    type="text"
                    size="mini"
                    @click="showPopFn(scope.row)">上传回单
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination-container">
      <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="total, sizes,prev, pager, next,jumper"
              :current-page.sync="listQuery.pageNum"
              :page-size="listQuery.pageSize"
              :page-sizes="[10,15,20]"
              :total="count">
      </el-pagination>
    </div>

    <el-dialog
            title="上传回单"
            :visible.sync="showPop"
            width="600px">
      <el-form>
        <el-form-item label="上传回单：">
          <el-upload
                  class="avatar-uploader"
                  :data="uploadToken"
                  action="https://upload.qiniup.com"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess">
            <i class="el-icon-plus avatar-uploader-icon" v-if="cutImg == ''"></i>
            <img :src="cutImg" v-else style="width:80px;height:80px;object-fit: contain;"/>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleConfirm" :loading="btnLoading2">确 定</el-button>
      </span>
    </el-dialog>


    <!--放大图片-->
    <el-dialog
            :visible.sync="dialogVisible5"
            width="800">
      <img :src="fullSrc" style="width:100%"/>
    </el-dialog>

  </div>
</template>
<script>
  import {getCustomerOption,customerDeliver,getQiniuToken,uploadReceivedUrl} from '@/api/partner'
  import {formatDate} from '@/utils/date';
  import store from '@/store'
  import { mapGetters } from 'vuex'
  const defaultListQuery={
    pageNum: 1,
    pageSize: 10,
    shipMonth:'',
    isReceived:'',
    customerId:'',
    isHasPrint:''
  };
  export default {
    name: "confirmationLetter",
    data(){
      return {
        listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
        tableData: [],
        count:0,
        listLoading: false,
        roles:store.getters.roles ? store.getters.roles : [],
        btnloading:false,
        customerLoading:false,
        customerList:[],
        showPop:false,
        btnLoading2:false,
        cutImg:'',
        uploadToken:{
            token:'',
        },
        imgDomain:'',
        dialogVisible5:false,
        fullSrc:'',
        cutReceivedId:'',
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'mobile',
        'userId',
        'isMange',
      ]),
    },
    created() {
      let now = new Date();
      let nowMonth = formatDate(now, 'yyyy-MM');
      this.listQuery.shipMonth = nowMonth;

        if (localStorage.getItem('confirmationLetterListQuery')){
            this.listQuery = JSON.parse(localStorage.getItem('confirmationLetterListQuery'));
            localStorage.removeItem('confirmationLetterListQuery');
        }
      this.getList();
      this.getUploadToken();
    },
    filters: {

    },
    methods:{
        //放大图片
        fullImg(item){
            this.dialogVisible5 = true;
            this.fullSrc = item
        },
        //上传图片
        handleAvatarSuccess(res){
            this.cutImg = this.imgDomain+res.key
        },
        //获取七牛TOKEN
        getUploadToken(){
            getQiniuToken().then((res)=>{
                this.uploadToken.token = res.token;
                this.imgDomain = res.domain
            })
        },
        handleClose(){
            this.showPop = false;
        },
        handleConfirm(){
            this.btnLoading2 = true;
            uploadReceivedUrl({receivedId:this.cutReceivedId,receivedUrl:[this.cutImg]}).then(()=>{
                this.btnLoading2 = false;
                this.handleClose();
                this.getList();
            }).catch(()=>{
                this.btnLoading2 = false;
            })
        },

        //显示上传弹窗
        showPopFn(item){
            this.showPop = true;
            this.cutImg = item.receivedUrl[0] ? item.receivedUrl[0] : '';
            this.cutReceivedId = item.receivedId;

        },

        //批量打印
        toPrintLetter(item,type){
            localStorage.setItem('confirmationLetterListQuery', JSON.stringify(this.listQuery));
            if(type == 'one'){
              let routeData = this.$router.resolve({name:'printLetter',query:{shipMonth:item.shipMonth,customerId:item.customerId,type:type}});
              window.open(routeData.href);
                // this.$router.push({name:'printLetter',query:{shipMonth:item.shipMonth,customerId:item.customerId,type:type}})
            }else{
                let customerIds = [];
                this.tableData.forEach((el)=>{
                    customerIds.push(el.customerId)
                })
              let routeData = this.$router.resolve({name:'printLetter',query:{shipMonth:this.listQuery.shipMonth,customerIds:customerIds.join(","),type:type}});
              window.open(routeData.href);
                // this.$router.push({name:'printLetter',query:{shipMonth:this.listQuery.shipMonth,customerIds:customerIds.join(","),type:type}})
            }
        },
        //获取客户列表
        remoteMethod1(query) {
            if(query && query!= ''){
                this.customerLoading = true;
                getCustomerOption({keywords:query}).then(response => {
                    this.customerList = response;
                    this.customerLoading = false;
                }).catch(()=>{
                    this.customerLoading = false;
                });
            }
        },



      handleSearchList(){
        this.listQuery.pageNum = 1;
        this.getList();
      },

        handleSizeChange(val){
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val){
            this.listQuery.pageNum = val;
            this.getList();
        },

      //获取列表
      getList() {
        this.listLoading = true;
        customerDeliver(this.listQuery).then(response => {
          this.tableData = response.list;
          this.count = response.count;
          this.listLoading = false;
        }).catch(()=>{
          this.listLoading = false;
        });
      },
    },
  }
</script>

<style scoped lang="scss">
  .avatar-uploader{
    margin-bottom:10px;
    display: inline-block;
    width:80px;
    height:80px;
    border:1px solid #DCDFE6;
    text-align: center;
    line-height: 80px;
  }
</style>
